.email-form {
  @extend %standard-form;

  // Some custom styling needed to pack the two inputs on a row neatly with their labels.
  .host-port {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    .host-box {
      flex: 1 1 auto;
      margin-right: 16px;
    }
    .port-box {
      flex: 0 1 auto;
      .port {
        max-width: 5em;
      }
    }
    max-width: 300px;
  }

  // Unlike some forms, we'd rather this one keep fields narrow.
  input[type="text"], input[type="password"], input[type="email"] {
    max-width: 300px;
  }
}

.email-test-form, .email-disable-form {
  @extend %standard-form;

  button.danger {
    @extend %button-danger;
  }
}
